/**
 * 主题相关状态管理
 * 处理主题切换、持久化存储等逻辑
 */

import { ref } from 'vue'
import { defineStore } from 'pinia'
import { STORAGE_CHECKBOX_THEME } from '@/constants/localKey'

export const useThemeStore = defineStore('theme', () => {
    // 当前主题名称
    const currentTheme = ref<string>(localStorage.getItem(STORAGE_CHECKBOX_THEME) || 'light')
    /**
     * 设置HTML标签的data-theme属性
     * @param themeName 主题名称
     */
    const setHtmlDataTheme = (themeName: string): void => {
        const htmlElement = document.documentElement
        htmlElement.setAttribute('data-theme', themeName)
        localStorage.setItem(STORAGE_CHECKBOX_THEME, themeName)
    }

    /**
     * 初始化主题
     * 从本地存储读取主题设置并应用
     */
    const initTheme = (theme: string): void => {
        currentTheme.value = theme
        setHtmlDataTheme(theme)
    }

    return {
        // 状态
        currentTheme,

        // 方法
        initTheme,
        setHtmlDataTheme,
    }
})
